<template>
  <div>
    <div style="width: 90%;display: flex; justify-content: space-between"> 
      <span>新增充电桩</span>
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="充电桩名称" prop="chargeName">
            <el-input v-model="formData.chargeName" placeholder="请输入充电桩名称" :maxlength="11" show-word-limit
              clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="充电桩编号" prop="chargeCode">
            <el-input v-model="formData.chargeCode" placeholder="请输入充电桩编号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="充电桩类型" prop="chargerType">
            <el-input v-model="formData.chargerType" placeholder="请输入充电桩类型" clearable @input="handleChargerTypeChange"
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="充电枪数量" prop="chargerNum">
            <el-input v-model="formData.chargerNum" placeholder="请输入充电枪数量" readonly  clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="充电功率" prop="chargerPower">
            <el-input v-model="formData.chargerPower" placeholder="充电功率"  clearable readonly
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="充电桩状态" prop="chargerStatus">
            <el-radio-group v-model="formData.chargerStatus" size="medium">
              <el-radio v-for="(item, index) in chargerStatusOptions" :key="index" :label="item.value"
                :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="归属充电站" prop="chargingStationId">
            <el-select v-model="formData.chargingStationId" placeholder="请选择归属充电站" clearable
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in stationManagerOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="描述" prop="chargerDes">
          <el-input v-model="formData.chargerDes" type="textarea" placeholder="请输入描述"
            :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-row>
      <el-form-item label="充电桩图片" prop="chargerImage" required>
        <el-upload ref="chargerImage" :file-list="chargerImagefileList" :action="chargerImageAction" :on-success="handleUploadSuccess"
          :before-upload="chargerImageBeforeUpload" list-type="picture-card">
          <i class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip"></div>
        </el-upload>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from "axios";
export default {
  components: {},
  props: [],
  data() {
    return {
      stationManagerOptions: [{
        "label": "dd8充电站",
        "value": 6
      }],
      formData: {
        chargeName: undefined,
        chargeCode: undefined,
        chargerType: "",
        chargingStationId:undefined,
        chargerNum: 2,
        chargerPower: undefined,
        chargerStatus: undefined,
        chargerDes: undefined,
        chargerImage: null,
      },
      rules: {
        chargeName: [{
          required: true,
          message: '请输入充电桩名称',
          trigger: 'blur'
        }],
        chargeCode: [{
          required: true,
          message: '请输入充电桩编号',
          trigger: 'blur'
        }],
        chargerType: [{
          required: true,
          message: '请输入充电桩类型',
          trigger: 'blur'
        }],
        chargerNum: [{
          required: true,
          message: '请输入充电枪数量',
          trigger: 'blur'
        }],
        chargerPower: [{
          required: true,
          message: '充电功率',
          trigger: 'blur'
        }],
        chargerStatus: [{
          required: true,
          message: '充电桩状态不能为空',
          trigger: 'change'
        }],
        chargerDes: [{
          required: true,
          message: '请输入描述',
          trigger: 'blur'
        }],
      },
      chargerImageAction: '/bdc/bdc/upload',
      chargerImagefileList: [],
      chargerStatusOptions: [{
        "label": "在线",
        "value": "在线"
      }, {
        "label": "离线",
        "value": "离线"
      }, {
        "label": "故障",
        "value": "故障"
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleChargerTypeChange(value) {
      // 根据充电桩类型设置默认充电功率
      if (value === '汽车充电桩') {
        this.formData.chargerPower = '100KW';
      } else if (value === '电瓶车充电桩') {
        // 这里可以添加更多的条件判断
        this.formData.chargerPower = '80KW';
      } else if (value === '公交车充电桩') {
        // 这里可以添加更多的条件判断
        this.formData.chargerPower = '160KW';
      }else {
        // 默认情况
        this.formData.chargerPower = '';
      }
    },
    handleUploadSuccess(response, file, fileList) {
      // 处理上传成功后的逻辑
      console.log('File uploaded successfully:', response);
      this.formData.chargerImage = response; // 将后端返回的文件路径保存到表单字段中
    },
    submitForm() {
      axios.post("/bdc/bdc/addCharge", this.formData)
      .then((res) => {
        console.log(res);
        this.$message.success("保存成功");
        this.$router.push({
          path: '/chargingStationList'
        })
      })
      .catch((error) => {
        console.log(error);
      });
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    chargerImageBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
